<template>
    <div class="aside-header">
        <div class="px-2">
            <tnxel-button link icon="Operation" tooltip="Maven根工程设置" @click="toMavenProject"/>
        </div>
        <div class="flex-1 flex-v-center text-regular">
            <template v-if="project.maven.singleArch">
                <div class="overflow-ellipsis">{{ project.maven.artifactId }}</div>
                <tnxel-button class="ms-2"
                    link
                    icon="Setting"
                    tooltip="应用设置"
                    @click="toAppSetting"
                />
            </template>
            <template v-else>
                <div class="flex-1">
                    <tnxel-select v-model="appName"
                        class="w-100"
                        :items="project.apps"
                        value-name="name"
                        text-name="caption"
                        selector="dropdown"
                    />
                </div>
                <tnxel-button class="ms-2"
                    link
                    icon="Setting"
                    tooltip="应用设置"
                    @click="toAppSetting(appName)"
                    v-if="appExists"/>
            </template>
        </div>
        <div class="px-2 flex-v-center">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import tnx from '@/tnx';
import ModelingProject from '@/logic/modeling/entity/ModelingProject.js';

import appSetting from './app-setting.vue';

export default {
    props: {
        project: {
            type: ModelingProject,
            required: true,
        },
        modelValue: String,
        save: {
            type: Function,
            required: true,
        },
    },
    data() {
        return {
            appName: this.modelValue,
        };
    },
    computed: {
        appExists() {
            if (this.project && this.appName) {
                return this.project.apps.some(app => app.name === this.appName);
            }
            return false;
        },
    },
    watch: {
        modelValue() {
            this.appName = this.modelValue;
            localStorage.setItem(this.getAppNameStorageKey(), this.appName);
        },
        appName() {
            this.$emit('update:modelValue', this.appName);
        },
    },
    methods: {
        toMavenProject() {
            this.$router.replace('/maven?path=' + this.project.maven.path);
        },
        getAppNameStorageKey() {
            let mavenProject = this.project.maven;
            return `modeling.${mavenProject.groupId}:${mavenProject.artifactId}.appName`;
        },
        toAppSetting(appName, tabName) {
            let app = this.project.isSingleArch() ? this.project.apps[0] : this.project.findApp(appName);
            tnx.open(appSetting, {
                app: app,
                tabName: tabName,
                after: model => {
                    let tempApp = app.clone();
                    tempApp.caption = model.caption;
                    tempApp.databaseVendor = model.databaseVendor;
                    tempApp.tableNameRule.update(model.tableNameRule);
                    this.save(tempApp, () => {
                        app.caption = tempApp.caption;
                        app.databaseVendor = tempApp.databaseVendor;
                        app.tableNameRule.update(tempApp.tableNameRule);
                        tnx.toast('设置已保存');
                    });
                },
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.aside-header {
    width: 100%;
    min-height: 39px;
    border-bottom: 1px solid var(--el-border-color);
    display: flex;
    align-items: center;
}
</style>
